<template>
 <div class="appointment_contain">
   <div>
     <h1>门诊挂号</h1>
   </div>

   <!-- <div id="uesrInfo">
     <el-button size="medium" type="success" @click="dialogFormVisible=true">病人信息</el-button>
     <el-dialog v-model="dialogFormVisible">
       <el-form :model="formInline">
         <el-form-item :label-width="formLabelWidth" label="姓名">
           <el-input v-model="formInline.name" autocomplete="off"></el-input>
         </el-form-item>
         <el-form-item :label-width="formLabelWidth" label="身份证号">
           <el-input v-model="formInline.idno" autocomplete="off"></el-input>
         </el-form-item>
         <el-form-item :label-width="formLabelWidth" label="出生年月">
           <el-input v-model="formInline.birth" autocomplete="off"></el-input>
         </el-form-item>
         <el-form-item :label-width="formLabelWidth" label="年龄">
           <el-input v-model="formInline.age" autocomplete="off"></el-input>
         </el-form-item>
         <el-form-item :label-width="formLabelWidth" label="性别">
           <el-select v-model="formInline.region1" placeholder="性别">
             <el-option label="男" value="选项1"></el-option>
             <el-option label="女" value="选项2"></el-option>
           </el-select>
         </el-form-item>
         <el-form-item :label-width="formLabelWidth" label="电话">
           <el-input v-model="formInline.tel" autocomplete="off"></el-input>
         </el-form-item>
         <el-form-item :label-width="formLabelWidth" label="血型">
           <el-input v-model="formInline.bloodtype" autocomplete="off"></el-input>
         </el-form-item>
         <el-form-item :label-width="formLabelWidth" label="居住地">
           <el-input v-model="formInline.address" autocomplete="off"></el-input>
         </el-form-item>
         <el-form-item :label-width="formLabelWidth" label="国籍">
           <el-input v-model="formInline.country" autocomplete="off"></el-input>
         </el-form-item>
         <el-form-item :label-width="formLabelWidth" label="民族">
           <el-input v-model="formInline.nation" autocomplete="off"></el-input>
         </el-form-item>
         <el-form-item :label-width="formLabelWidth" label="是否已婚">
           <el-select v-model="formInline.region2" placeholder="是否已婚">
             <el-option label="是" value="选项1"></el-option>
             <el-option label="否" value="选项2"></el-option>
           </el-select>
         </el-form-item>
       </el-form>

       <template #footer>
                 <span class="dialog-footer">
                     <el-button @click="dialogFormVisible = false">取 消</el-button>
                     <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
                 </span>
       </template>
     </el-dialog>

   </div> -->

   <div class="basic_info">
     <el-form ref="registeredInfo" label-position="right" :model="appoInfo" label-width="60px">
       <el-form-item label="姓名">
         <el-input v-model="appoInfo.name" clearable></el-input>
       </el-form-item>
       <el-form-item label="性别">
         <el-select v-model="appoInfo.sex" clearable placeholder="请选择">
           <el-option label="男" value="男"></el-option>
           <el-option label="女" value="女"></el-option>
         </el-select>
       </el-form-item>

       <el-form-item label="年龄">
         <el-input v-model="appoInfo.age" clearable></el-input>
       </el-form-item>


       <el-form-item label="电话">
         <el-input v-model="appoInfo.tel" clearable></el-input>
       </el-form-item>


       <el-form-item label="身份证">
         <el-input v-model="appoInfo.idno" clearable></el-input>
       </el-form-item>
     </el-form>
   </div>
   <div class="doctor_contain">
     <div class="symptom">
       <p>症状描述</p>
       <el-input clearable :rows="4" resize="none" type="textarea" v-model="appoInfo.symptom"></el-input>
     </div>
     <div class="selector">
       <span style="font-size: 18px;padding-right: 15px">选择医生</span>
       <el-cascader :options="options" :show-all-levels="true" v-model="selectDoctor"
                    :props="{emitPath:false,value:'value',label:'label',children:'children'}"
                    placeholder="请选择" clearable @change="getCurrentDoctorInfo"> </el-cascader>
     </div>
     <div class="doctor_info">
       <el-image :src="showDoctor.avatar" class="doctor_avatar" v-if="showDoctor.avatar!==null"></el-image>
       <el-image v-else :src="default_avatar" class="doctor_avatar"></el-image>
       <el-descriptions :column="2" border direction="vertical" v-model="showDoctor">
          <el-descriptions-item label="姓名" value="doctorInfoList.name" align="center">{{showDoctor.name}}</el-descriptions-item>
          <el-descriptions-item label="科室" value="doctorInfoList.subject" align="center">{{showDoctor.subject}}</el-descriptions-item>
          <el-descriptions-item label="职称" value="doctorInfoList.proTitle" align="center">{{showDoctor.proTitle}}</el-descriptions-item>
          <el-descriptions-item label="所属看诊室" value="doctorInfoList.roomNo" align="center">{{showDoctor.roomNo}}</el-descriptions-item>
          <el-descriptions-item label="当前挂号人数" value="doctorInfoList.sex" align="center">{{showDoctor.amount}}</el-descriptions-item>
       </el-descriptions>
     </div>
   </div>
   <div class="btn">
      <span>
        <el-button type="primary" class="hvr-grow" @click="onSubmit">挂 号</el-button>
      </span>
   </div>
 </div>
  <transition name="pay_anime">
    <div v-show="showPay" class="pay_contain">
      <el-card class="pay-card">
        <template #header>
          <div class="card-header">
            <span>支付</span>
            <el-button class="button" type="text" icon="fa fa-minus-square fa-lg" @click="showPay=!showPay"></el-button>
          </div>
        </template>

        <div class="card-body">
          <transition-group name="info_anime" appear>
            <div class="left" v-show="true">
              <span>挂号费: ￥{{appoInfo.appoPrice}}</span>
            </div>

            <div class="center" v-if="pay_type === '二维码'">
              <el-image style="width: 120px;height: 120px;"></el-image>
            </div>

            <div class="right">
              <el-radio-group v-model="pay_type" >
                <el-radio-button label="现金"></el-radio-button>
                <el-radio-button label="二维码"></el-radio-button>
              </el-radio-group>
            </div>
          </transition-group>
        </div>

        <transition appear name="btn_anime">
          <div class="pay-btn" v-if="pay_type!=='二维码'">
            <el-button type="success" round @click="pay">支付</el-button>
            <el-button type="info" round @click="showPay=false">取消</el-button>
          </div>
        </transition>

      </el-card>
    </div>
  </transition>
</template>

<script>
import {getAvailableDoctor, receptionAppoint} from "../../api/api";
import {ElMessage, ElNotification} from "element-plus";


export default {
  name: 'appointment',
  mounted() {
    /*
    * 数据回显，options不能直接push，否则数据不显示
    * */
    getAvailableDoctor({},{})
    .then(res=>{
      this.doctorlist = res.data
      const opts = []
      /*
      * 待优化，转换不太对
      * */
      if (this.doctorlist.length!==0){
        this.doctorlist.forEach((value, index, array) => {
          let item = {
            value: value.subject,
            label: value.subject,
            children: []
          }
          if (JSON.stringify(opts).indexOf(JSON.stringify(item))===-1){
            opts.push(item)
          }
        })

        /*
        * 算法待优化
        * */
        opts.forEach((value, index, array) => {
          const item = value
          this.doctorlist.forEach((value1, index1, array1) => {
            if (value1.subject === item.value){
              let a = {
                value: value1.docId,
                label: value1.name
              }
              item.children.push(a)
            }
          })
        })
      }
      this.options = opts
    })
    .catch(err=>{
      console.log(err)
    })
  },
  data() {
    return {

      pay_type: '现金',
      showPay:false,
      appoInfo: {
        name: '',
        idno:'',
        age: '',
        tel: '',
        sex: '',
        docId: '',
        symptom:'',
        appoPrice:10
      },
      dialogFormVisible: false,
      formInline: {
        name: '',
        idno: '',
        birth: '',
        age: '',
        region1: '',
        tel: '',
        bloodtype: '',
        address: '',
        country: '',
        nation: '',
        region2: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '120px',
      data: [{
        appoint_id: '2021032155',
        name: '王小虎',
        appo_rice: '5',
      }],

      default_avatar:'https://gitee.com/Kolvzaki/pics/raw/master/img/default_avatar.jpg',

      doctorlist:[],
      selectDoctor: '',
      showDoctor:{
        avatar: null
      },
      options: []
    }
  },
  methods: {
    pay(){
      const loginUser = JSON.parse(localStorage.getItem("loginData"))
      receptionAppoint({
        ...this.appoInfo
      },{
        "satoken":loginUser.tokenValue
      })
          .then(res=>{
            console.log(res)
            if (res.code === 200){
              ElMessage.success({
                type:'success',
                message: res.msg
              })
              this.showPay = false
              this.appoInfo = {
                name: '',
                idno:'',
                age: '',
                tel: '',
                sex: '',
                docId: '',
                symptom:'',
                appoPrice:10
              }
            }
            else{
              ElMessage.warning({
                type: 'warning',
                message: res.msg
              })
            }
          })
          .catch(err=>{
            console.log(err)
            ElMessage.error({
              type: 'error',
              message: err
            })
          })
    },
    showType(){

    },

    cancelOrder(){
      this.$router.back()
    },

    onSubmit() {

      if (this.appoInfo.name===''||this.appoInfo.idno===''||this.appoInfo.tel===''){
        ElNotification({
          title: '警告',
          type:'error',
          message: '请填写挂号信息',
        })
        return
      }
      if (this.selectDoctor === null || this.selectDoctor===''){
        ElNotification({
          title: '警告',
          type:'error',
          message: '请选择一个医生',
        })
        return
      }
      this.showPay = true
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    getCurrentDoctorInfo() {
      if (this.selectDoctor === null){
        this.showDoctor = {
          avatar:null
        }
      }
      for (let i=0;i<this.doctorlist.length;i++){
        if (this.doctorlist[i].docId === this.selectDoctor){
          this.showDoctor = this.doctorlist[i]
          break
        }
      }
      this.appoInfo.docId = this.selectDoctor

      if (this.showDoctor.proTitle === '教授'){
        this.appoInfo.appoPrice = 50
      }else if(this.showDoctor.proTitle === '副教授'){
        this.appoInfo.appoPrice = 35
      }else if (this.showDoctor.proTitle === '主任'){
        this.appoInfo.appoPrice = 20
      }else if(this.showDoctor.proTitle === '副主任'){
        this.appoInfo.appoPrice = 15
      }

    }
  }
}
</script>

<style scoped>

.btn_anime-enter-active{
  animation: rollIn .5s;
}

.btn_anime-leave-active{
  animation: rollOut .5s;
}

.info_anime-enter-active{
  animation: zoomIn .5s;
}
.info_anime-leave-active{
  animation: zoomOut .5s;
}
.info_anime-move{
  transition: transform 0.25s ease-in;
}

.pay-card{
  width: 600px;
  height: 250px;
}
.center{
  position: relative;
  width: fit-content;
  height: fit-content;
}
.pay-btn{
  margin-top: 30px ;
  position: absolute;
  left: 35%;
  bottom: 10%;
}
.card-body{
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: space-between;
}
.pay_anime-enter-active{
  animation: bounceIn .5s;
}

.pay_anime-leave-active{
  animation: bounceOut .5s;
}

.card-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pay_contain{
  position: fixed;
  width: 600px;
  height: auto;
  z-index: 1;
  left: 45%;
  top: 45%;
}

.appointment_contain{
  position: relative;
  width: 100%;
  height: auto;
}
.symptom{
  position: relative;
  width: 800px;
  height: 150px;
  padding-bottom: 20px;
  margin: -20px auto 0 auto;
}
.symptom p{
  position: relative;
  right: 355px;
  top: 10px;
}
.doctor_avatar{
  width: 120px;
  height: 120px;
  position: absolute;
  left: 120px;
  border:  #FF6633;
  border-radius: 30px;
}
.doctor_info{
  width: 600px;
  margin: 0 auto;
  padding-top: 50px;
}
.selector{
  width: fit-content;
  height: fit-content;
  margin: 0 auto;
  padding-right: 25px;
}
.doctor_contain{
  position: relative;
  width: 100%;
}
.basic_info{
  margin: 0 auto;
  width: auto;
  height: auto;
}
.basic_info .el-form{
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
  padding: 10px 10px;
}

#uesrInfo {
  text-align: right;
  margin-bottom: 20px;
}

#tablelist {
  margin-top: 50px;
}

.btn {
  margin-top: 50px;
}
</style>

